<script setup lang="ts">
import {reactive, ref} from "vue";
import {nmzpJobDelivery} from "@/api/job"
import router from "@/router";

const active = ref(0);
const jobDelvers = ref<any>()

//查询投递
const getDeliver = () => {
  nmzpJobDelivery().then(res => {
    jobDelvers.value = res.data
  })
}
getDeliver()
const gotoBack = () => history.back()
const gotoDetail = (id:any) =>{
  router.push('/task/details/'+id)
}
</script>

<template>
  <van-nav-bar title="我的投递" left-arrow @click-left="gotoBack"/>
  <div class="task-page">
    <div class="task-item" v-for="item in jobDelvers" @click="gotoDetail(item.jobId)">
      <div class="task-item-top">
        <h3>{{ item.jobName }}</h3>
      </div>
      <dl>
        <dt>
          <h5>薪资</h5>
          <strong>￥{{item.jobBudget}}</strong>
        </dt>
      </dl>
      <van-steps :active="item.status">
        <van-step>不合适</van-step>
        <van-step>待沟通</van-step>
        <van-step>已沟通</van-step>
      </van-steps>
    </div>
  </div>
</template>

<style scoped>
.task-page {
  background: #f9f9f9;
  padding: 0 0.59rem 3rem;
  min-height: calc(100vh - 3rem);
}

.task-item {
  background: #FFFFFF;
  border-radius: 0.53rem;
  margin: 0 0 0.53rem;
  padding: 10px 10px 0;
  position: relative;
  font-size: 0.69rem;
  font-weight: 100;
  color: #666666;
}

.task-item-top {
  display: flex;
}

.task-item-top h3 {
  font-size: 0.91rem;
  line-height: 0.91rem;
  font-weight: 400;
  color: #333333;
  margin-bottom: 1.01rem;
}

.task-item-top span {
  position: absolute;
  right: 0;
  width: 2.29rem;
  height: 1.08rem;
  line-height: 1.08rem;
  background: linear-gradient(90deg, #FEA829, #FE8F27);
  border-radius: 0.53rem 0 0 0.53rem;
  text-align: center;
  font-size: 0.59rem;
  color: #FFFFFF;
}
</style>